/*
 * @Date: 2022-01-11 18:10:52
 * @LastEditors: LeeKing
 * @LastEditTime: 2022-01-13 17:31:16
 * @FilePath: \todo-app\src\App.js
 */
import React, { Component } from 'react'
import TodoHeader from './components/TodoHeader'
import TodoMain from './components/TodoMain'
import TodoFooter from './components/TodoFooter'

class App extends Component {
  state = {
    list: [
      { id: 100, name: '吃饭', isDone: true },
      { id: 201, name: '睡觉', isDone: false },
      { id: 103, name: '打豆豆', isDone: true }
    ],
    flagChecked: false,
    ClickState: 'All', 
  }


  // ~添加数据
  setList = content => {
    const { list } = this.state
    if (content === '') return alert('请输入内容！')
    this.setState({
      list: [
        ...list,
        {
          id: Math.random(),
          name: content,
          isDone: false
        }
      ]
    })
  }
  // ~ 删除数据
  delContent = id => {
    const { list } = this.state

    this.setState({
      list: list.filter(item => item.id !== id)
    })
  }

  // ~改变状态
  setActive = id => {
    const { list } = this.state
    this.setState(
      {
        list: list.map(item => {
          if (item.id === id) {
            return {
              ...item,
              isDone: !item.isDone
            }
          } else {
            return item
          }
        })
      },
      function () {
        const { list } = this.state
        const flag = list.every(item => {
          return item.isDone === true
        })
        this.setState({
          flagChecked: flag
        })
      }
    )
  }

  // ~全选
  selectAll = state => {
    const { list } = this.state
    this.setState({
      list: list.map(item => {
        return {
          ...item,
          isDone: state
        }
      })
    })
    this.setState({
      flagChecked: state
    })
  }

  // ~ClearCompleted清楚全选
  ClearCompleted = () => {
   const { list } = this.state
    const arr = list.filter(item => {
     return item.isDone===false
    })
    this.setState({
      list:arr
    })
  }
  // ~将状态改为
  
  setAllState = (value) => {
    this.setState({
      ClickState:value
    })
  }
 
  render() {
    const { list, flagChecked ,ClickState} = this.state
    return (
      <section className="todoapp">
        <TodoHeader setList={this.setList} />
        <TodoMain
          list={list}
          delContent={this.delContent}
          setActive={this.setActive}
          selectAll={this.selectAll}
          flag={flagChecked}
          ClickState={ClickState}
        
        />
        <TodoFooter list={list} ClearCompleted={this.ClearCompleted} setAllState={this.setAllState} ClickState={ClickState}   />
      </section>
    )
  }
}

export default App
